<template>
	<view style="min-height: 100vh;">
		<dev-navbar :title="chart_information.indicName"></dev-navbar>
		<!-- 切换bar -->
		<view class="switch-box">
			<view :class="current===0?'activation-bar':'not-active-bar'" @tap="changeType(0)">
				趋势分析
			</view>
			<view :class="current===1?'activation-bar':'not-active-bar'" @tap="changeType(1)">
				历史数据
			</view>
		</view>
		<!-- 年月周 -->
		<view class="time-box" v-show="current ===0">
			<view class="time-selection">
				<dev-button @tapDev="buttonIndex='D'" width="230" height="50" radius="0"
					:bg-color="buttonIndex==='D'?'#2EA7E0':'#E7F3FC'" :color="buttonIndex==='D'?'#fff':'#2EA7E0'">日
				</dev-button>
				<dev-button @tapDev="buttonIndex='W'" width="230" height="50" radius="0"
					:bg-color="buttonIndex==='W'?'#2EA7E0':'#E7F3FC'" :color="buttonIndex==='W'?'#fff':'#2EA7E0'">周
				</dev-button>
				<dev-button @tapDev="buttonIndex='M'" width="230" height="50" radius="0"
					:bg-color="buttonIndex==='M'?'#2EA7E0':'#E7F3FC'" :color="buttonIndex==='M'?'#fff':'#2EA7E0'">月
				</dev-button>
			</view>
			<!-- <dev-button width="230" height="50" radius="0" bg-color="#2EA7E0">年</dev-button> -->
			<!-- 日期切换 -->
			<view class="date-flip">
				<dev-svg-image @tap.stop="dateFlipping(2)" v-show="buttonIndex=='D'" svg-name="pageTurningLeft"
					height="55" width="55">
				</dev-svg-image>
				<dev-svg-image @tap.stop="pageTurning(2)" style="margin-left: 62rpx;" svg-name="leftAroow"
					modify-color="#2EA7E0" height="38" width="38"></dev-svg-image>
				<view class="date-information">
					<uni-datetime-picker ref="dateTimeRef" @change="clickTime" type="date">{{chooseTime}}
					</uni-datetime-picker>
          <div @click="selectTime" style="display: flex;align-items: center;justify-content: center">
            <dev-svg-image  style="margin-left:12rpx;" svg-name="downArrow" modify-color="#2EA7E0" height="22"
                           width="22"></dev-svg-image>
          </div>

				</view>
				<dev-svg-image @tap.stop="pageTurning(1)" style="margin-right: 62rpx;" modify-color="#2EA7E0"
					height="40" width="40">
				</dev-svg-image>
				<dev-svg-image @tap.stop="dateFlipping(1)" v-show="buttonIndex=='D'" svg-name="pageTurningRight"
					height="55" width="55">
				</dev-svg-image>
			</view>
			<!-- 图表信息 -->
			<chart-component ref="chartComponent" :beginTime="beginTime" @change="chaetChange" :data="chart_information"
				:mode="buttonIndex"></chart-component>
			<!-- 设备采集 手工录入-->
			<view class="data-record-box">
				<view class="function-box" v-if="chart_information.deviceFlag==1" @tap.stop="equipmentAcquisition()">
					<dev-svg-image mode="image" image-url="shoppingMall/56D66C22DB9146F68EDE6C629FD69855.png"
						height="46" width="50"></dev-svg-image>
					<text class="functional-text">设备采集</text>
				</view>

				<view class="function-box" :style="chart_information.deviceFlag==0?'width:100vh;':''"
					@tap.stop="jumpPages()">
					<dev-svg-image svg-name="edit" height="50" width="50"></dev-svg-image>
					<text class="functional-text">手工录入</text>
				</view>
			</view>


			<!-- 专项评估 健康计划 -->
			<view class="special-evaluation" v-if="chart_information.assessFlag==1">
				<view @tap.stop="jumpToSpecialAssessment(6)" class="evaluation-list"
					style="background-image: url('http://static.bsyjk.cn/shoppingMall/0A13331FE8FF4C539B493FEB75F76139.png');">
					<view class="big-name" style="color:#029D95;">
						专项评估
					</view>
					<view class="small-name" style="color: #00A096;">
						守护身体健康
					</view>
				</view>
				<view @tap.stop="jumpToHealthPlan()" class="evaluation-list"
					style="background-image: url('http://static.bsyjk.cn/shoppingMall/7BE1BC153AE54312B03DF6222F13EA9A.png');">
					<view class="big-name" style="color: #EB5B77;">
						健康计划
					</view>
					<view class="small-name" style="color: #EB5B77;">
						守护身体健康
					</view>
				</view>
			</view>

			<!-- 知识课堂 -->
			<view style="padding: 0rpx 24rpx;">
				<view class="recommended-modules" v-if="knowledgeClassList.length>0">
					<!-- 标题 -->
					<view class="title-module">
						<view class="left-title">
							<view class="color-block"></view>
							<text class="title-name">{{chart_information.indicName}}知识课堂</text>
						</view>
						<view class="right-title" @tap="moreRecommended()">
							<text class="right-name">更多</text>
							<dev-svg-image></dev-svg-image>
						</view>
					</view>

					<!-- 内容 -->
					<view class="" style="height: 38rpx;"></view>
					<view class="each-knowledge-point" v-for="(item,index) in knowledgeClassList" :key="item.topicId">

						<view class="top-half-of-list" @tap.stop="details(item,index)">
							<view class="list-left">
								<!-- 知识名称 -->
								<view class="knowledge-content text-line">
									{{item.topicTitle}}
								</view>
								<view class="align-items-l">
									<dev-svg-image svgName="eyes"></dev-svg-image> <text
										class="views">{{item.readNum}}</text>
								</view>
							</view>
							<dev-svg-image mode="image" :imageUrl="item.coverUrl" width="200" height="160" radius="10">
							</dev-svg-image>
						</view>

						<dev-split-line v-show="index!==1" top="24" bottom="24"></dev-split-line>
					</view>


				</view>
				<!-- 推荐商品 -->
				<view class="recommended-modules" v-if="productList.length>0">
					<view class="title-module">
						<view class="left-title">
							<view class="color-block"></view>
							<text class="title-name">推荐商品</text>
						</view>
						<view class="right-title">
							<navigator open-type="switchTab" url="/pages/tab/college" class="moreTitle"
								hover-class="hoverbgfff">

								<text class="right-name">更多</text>
							</navigator>
							<dev-svg-image></dev-svg-image>
						</view>
					</view>

					<!-- 内容 -->

					<view class="product-list">

						<view class="every-item" v-for="(item,index) in productList" :key="index">
							<navigator target="miniProgram" open-type="navigate" :app-id="shopAppId"
								:path="item.detailUrl" extra-data="" :version="version" hover-class="hoverbgfff">
								<dev-svg-image mode="image" :imageUrl="item.goodsImageUrl" width="320" height="224">
								</dev-svg-image>
								<view class="content-information">
									<view class="trade-name text-line ">
										{{item.title}}
									</view>
									<view class="sales-price">
										<text class="price">¥{{item.salePrice}}</text>
										<!-- <text class="sales-volume">月销{{item.salesNum}}</text> -->
									</view>
								</view>
							</navigator>
						</view>

					</view>
				</view>
			</view>


			<view class="" style="height: 50rpx;"></view>

		</view>


		<!-- 历史数据 -->
		<view class="time-box" v-show="current ===1">
			<view class="time-selection">
				<dev-button width="230" @tapDev="getHistory(7)" height="50" radius="0"
					:bg-color="currentDays===7?'#2EA7E0':'#E7F3FC'" :color="currentDays===7?'#fff':'#2EA7E0'">7天
				</dev-button>
				<dev-button width="230" @tapDev="getHistory(30)" height="50" radius="0"
					:bg-color="currentDays===30?'#2EA7E0':'#E7F3FC'" :color="currentDays===30?'#fff':'#2EA7E0'">30天
				</dev-button>
				<dev-button width="230" @tapDev="getHistory('')" height="50" radius="0"
					:bg-color="currentDays===''?'#2EA7E0':'#E7F3FC'" :color="currentDays===''?'#fff':'#2EA7E0'">全部
				</dev-button>
			</view>
			<!-- 数据异常 -->
			<view class="data-exception">
				<view class="text">
					数据异常
				</view>
				<switch class="switch-button" @change="switchButton" :checked="unusual"
					style="transform: scale(0.8,0.8)"></switch>
			</view>

			<view class="data-list-box">
				<view class="monthly-data" v-for="(item,index) in list" v-if="list.length>0" :key="index">
					<view class="month-information" v-show="index == 0">
						{{item.time | timesFormat('YYYY年M月')}}
					</view>
					<view class="month-information" v-show="index!==0 && item.time != list[index-1].time">
						{{item.time | timesFormat('YYYY年M月')}}
					</view>
					<view class="daily-data" v-for="(childItem,childInex) in item.list" :key="childItem.healthDataId">
						<view class="measurement-time">
							{{childItem.createTime | timesFormat('MM-DD HH:mm')}}
							<!-- 05-24 16:31 -->
						</view>
						<view class="function-bar">
							<view class="function-bar" @tap="historicalDetails(childItem)">
								<dev-svg-image v-show="childItem.inputType==2" mode="image" height="34" width="30"
									imageUrl="shoppingMall/FC862DBBEAAF45719EAFB73E0845500B.png">
								</dev-svg-image>
								<dev-svg-image v-show="childItem.inputType==1" mode="image" width="33" height="37"
									imageUrl="shoppingMall/25D2AAACA5EA41B3A26E28FB7DBFA427.png">
								</dev-svg-image>
								<view
									:style="{'margin-left':'10rpx','margin-right':'20rpx','color':childItem.indicStatus==1|| allData.indicStatus==0?'#9B9B9B':childItem.indicStatus==2?'#FF333A':'#2EA7E0'}">
									<text class="red-box">{{childItem.deviceType==='SLEEP'?(childItem.firstValue/60).toFixed(1):childItem.firstValue ||''}}</text>
									<text class="grey-box">{{childItem.secondValue?'/':''}}{{childItem.secondValue||''}}{{childItem.firstUnit||''}}</text>
								</view>
								<view class="grey-box"
									:style="{'color':childItem.indicStatus==1?'#9B9B9B':childItem.indicStatus==2?'#FF333A':'#2EA7E0'}"
									v-show="childItem.thirdValue">
									{{childItem.thirdValue}}{{childItem.secondUnit}}
								</view>
								<dev-svg-image v-show="childItem.deviceType!=='DIET' && childItem.deviceType!=='MOTION'"
									height="32" modify-color="#CFCCD0" style="margin-right: 40rpx;">
								</dev-svg-image>
							</view>
							<view @click="deleteHistory(childItem)">
								<!-- {{childItem.healthDataId}} -->
								<dev-svg-image svgName="delete"></dev-svg-image>
							</view>
						</view>

					</view>
				</view>

				<nodata v-if="list.length==0"></nodata>
				<view class="" style="height: 50rpx;"></view>
			</view>

		</view>

		<dev-iphone-bottom></dev-iphone-bottom>
	</view>
</template>

<script>
	import chartComponent from '@/pagesHome/components/chart-component.vue'
	import uniDatetimePicker from '@/pagesHome/components/uni-datetime-picker/uni-datetime-picker.vue'
	import dayjs from '@/common/utils/day/day.js'
	export default {
		components: {
			chartComponent,
			uniDatetimePicker
		},
		data() {
			return {
				title: '血压',
				current: 0, // 当前选中的类型值  0趋势分析；1历史数据
				buttonIndex: 'D', //当前选择的日期类型 D日；W周；M月；
				chart_information: {}, //图表信息

				chooseTime: dayjs().format('YYYY-MM-DD'), //日否选择日期
				beginTime: dayjs().format('YYYY-MM-DD'), //开始日期

				currentDays: 7, //天数

				pageCurrent: 1, //当前页码
				pageSize: 30, //每页条数
				unusual: false, //是否只查看异常数据
				list: [], //数据
				pages: '', //总页数
				knowledgeClassList: [], //知识课堂列表
				productList: [], //商品列表
                shopAppId: global.SHOP_APP_ID,
                version: global.IS_DEV?'trial':'release',
				initialPresentation: true, //是否初次加载
			};
		},
		onShow() {
			if (this.initialPresentation) {
				this.initialPresentation = false;
				return
			}
			this.$refs.chartComponent.chartTrend(dayjs().format('YYYY-MM-DD')); //跟新视图
		},
		onLoad(e) {
			console.log(JSON.parse(e.data), 'shuju')
			this.chart_information = JSON.parse(e.data);
			if (this.current == 0) {
				this.knowledgeList(); //获取知识课堂
				this.pickOfTheWeek(); //获取推荐商品
			}
		},
		onReachBottom() {
			if (this.pageCurrent <= this.pages && this.current === 1) {
				this.getHistory(this.currentDays);
			}
		},
		filters: {
			timesFormat: function(value, format) {
				return dayjs(value).format(format);
			}
		},
		methods: {
			//跳转到历史详情
			historicalDetails(val) {
				if (val.deviceType !== 'DIET' && val.deviceType !== 'MOTION') {
					this.$urouter.navigateTo({
						url: '/pagesHome/manual-input/view-details',
						params: {
							data: JSON.stringify(this.chart_information),
							historicalDetails: JSON.stringify(val),
						}
					});
				}

			},
			//文章更多
			moreRecommended() {
				uni.navigateTo({
					url: '/pages/subpackage/find/cyclopedia/cyclopedia'
				})
			},
			//文章详情
			details(item, idx) {
				uni.navigateTo({
					url: '/pages/subpackage/find/articleDetails/details?id=' + item.topicId
				})
			},
			//跳转到专项评估
			jumpToSpecialAssessment(topicId) {
				this.$urouter.navigateTo({
					url: '/pagesHome/start-assessment/start-assessment',
					params: {
						topicId,
					}
				});
			},
			//跳转到健康计划
			jumpToHealthPlan() {
				this.$urouter.navigateTo({
					url: '/pagesHome/health-assessment/health-plan',
					params: {
						// topicId,
					}
				});
			},
			//跳转到手动录入
			jumpPages() {
				console.log(this.chart_information, 'this.chart_information')
				//饮食
				if (this.chart_information.itemCode === 'DIET') {
					this.$urouter.navigateTo({
						url: '/pages/subpackage/home/record/diet',
						params: {
							data: JSON.stringify(this.chart_information),
							indicId: this.chart_information.indicId
						}
					});
					return
				}
				//运动
				if (this.chart_information.itemCode === 'MOTION') {
					this.$urouter.navigateTo({
						url: '/pages/subpackage/home/record/exercise',
						params: {
							data: JSON.stringify(this.chart_information),
							indicId: this.chart_information.indicId
						}
					});
					return
				}

				this.$urouter.navigateTo({
					url: '/pagesHome/manual-input/manual-input',
					params: {
						data: JSON.stringify(this.chart_information)
					}
				});
			},

			//设备跳转
			equipmentAcquisition() {
				//血压设备录入
				if (this.chart_information.itemCode === 'BLOOD_PRESSURE') {
					this.$urouter.navigateTo({
						url: '/pagesHome/manual-input/equipment-records',
						params: {
							data: JSON.stringify(this.chart_information)
						}
					});
				}
				//体重
				if (this.chart_information.itemCode === 'WEIGHT') {
					this.$urouter.navigateTo({
						url: '/pages/subpackage/home/equipment/balance',
						params: {
							data: JSON.stringify(this.chart_information)
						}
					});
				}
				//尿酸
				if (this.chart_information.itemCode === 'URIC_ACID') {
					this.$urouter.navigateTo({
						url: '/pages/subpackage/home/equipment/uricAcid',
						params: {
							data: JSON.stringify(this.chart_information)
						}
					});
				}
				//血糖
				if (this.chart_information.itemCode === 'BLOOD_SUGAR') {
					this.$urouter.navigateTo({
						url: '/pages/subpackage/home/equipment/bloodSugar',
						params: {
							data: JSON.stringify(this.chart_information)
						}
					});
				}
			},

			changeType(val) {
				console.log(val,'---val')
				if (this.current !== val) {
					this.current = val;
				}
				if (val == 1) {
					this.pageCurrent = 1
					this.getHistory(7);
					this.list = [];
				}
			},
			//图表变化
			chaetChange(val) {
				this.chooseTime = val.time;
			},
			//翻页
			pageTurning(val) {
				this.$refs.chartComponent.pageTurning(val)
			},
			//大翻页
			dateFlipping(val) {
				this.$refs.chartComponent.dateFlipping(val)
			},
			//选择时间
			clickTime(time) {
        console.log(time,'---time---')
				this.beginTime = time;
				console.log(time)
			},
      selectTime(){
        this.$refs.dateTimeRef.show()
      },
			//获取历史记录
			getHistory(val) {
				if (val !== this.currentDays) {
					this.list = [];
					this.pageCurrent = 1;
				}
				let parameter = {
					indicId: this.chart_information.indicId,
					pageCurrent: this.pageCurrent,
					pageSize: this.pageSize
				}
				if (this.unusual) parameter['unusual'] = 1;
				this.currentDays = val;
				if (val) parameter['days'] = val;

				this.$https.get(global.apiUrls.getHistoryList, parameter).then(res => {
					if (res.data.code == 1000) {
						this.list = [...this.list, ...res.data.result.records];
						this.pages = res.data.result.pages;
						this.pageCurrent++;
					}
				})
			},
			//滑动开关
			switchButton(e) {
				console.log(e)
				this.unusual = e.detail.value;
				console.log(this.unusual, '是个啥')
				this.list = [];
				this.pageCurrent = 1;
				this.getHistory(this.currentDays);
			},

			//删除历史数据
			deleteHistory(val, index, ind) {
				// return
				let _this = this;
				uni.showModal({
					title: '提示',
					content: '您确定要删除当前项吗？',
					success: function(res) {
						if (res.confirm) {
							_this.$https.delete(global.apiUrls.deleteHistoryList + val.healthDataId, {
								healthDataId: val.healthDataId,
								indicId: val.indicId
							}).then(res => {
								if (res.data.code == 1000) {
									_this.$message.info('删除成功')
									_this.pageCurrent = 1;
									_this.list = [];
									_this.getHistory(_this.currentDays)
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},

			//获取知识列表
			knowledgeList() {
				this.$https.get(global.apiUrls.knowledgeList, {
					label: this.chart_information.indicName,
					num: 2
				}).then(res => {
					if (res.data.code == 1000) {
						this.knowledgeClassList = res.data.result || [];
					}
				})
			},

			//获取推荐商品
			pickOfTheWeek() {
				this.$https.get(global.apiUrls.pickOfTheWeek, {
					indicId: this.chart_information.indicId
				}).then(res => {
					if (res.data.code == 1000) {
						this.productList = res.data.result || [];
					}
				})
			}






		}

	}
</script>

<style lang="scss">
	// 切换栏
	.switch-box {
		display: flex;
		background-color: #fff;
		height: 502rpx;

		.activation-bar {
			width: 50%;
			height: 80rpx;
			text-align: center;
			line-height: 80rpx;
			color: #2EA7E0;
			font-size: 30rpx;
			font-weight: 400;
			border-bottom: 4rpx solid #2EA7E0;
		}

		.not-active-bar {
			width: 50%;
			height: 80rpx;
			text-align: center;
			line-height: 80rpx;
			color: #303030;
			font-size: 30rpx;
			font-weight: 400;
			border-bottom: 4rpx solid #DDDDDD;
		}
	}

	//时间模块
	.time-box {
		margin-top: -380rpx;

		.time-selection {
			// margin-top: 40rpx;
			margin-left: 30rpx;
			display: flex;
			width: 686rpx;
			background-color: antiquewhite;
			border-radius: 25rpx;
			overflow: hidden;
		}

		//数据异常
		.data-exception {
			margin-top: 44rpx;
			padding: 0rpx 24rpx;
			height: 102rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.text {
				font-size: 28rpx;
				font-weight: 500;
				color: #333333;
			}

			.switch-box {
				width: 64rpx;
				height: 30rpx;
			}
		}

		//测量数据
		.data-list-box {
			background-color: #F5F5F5;
			min-height: 200rpx;
			padding: 1rpx 0;

			.monthly-data {

				.month-information {
					height: 80rpx;
					background-color: #F5F5F5;
					font-size: 28rpx;
					font-weight: 500;
					color: #2EA7E0;
					line-height: 80rpx;
					padding: 0rpx 24rpx;
				}

				.daily-data {
					display: flex;
					align-items: center;
					justify-content: space-between;
					height: 100rpx;
					padding: 0rpx 24rpx;
					background-color: #fff;
					border-bottom: 1rpx solid #F5F5F5;

					.measurement-time {
						font-size: 30rpx;
						font-weight: 500;
						color: #0D0E10;
					}

					.function-bar {
						display: flex;
						align-items: center;
						justify-content: flex-end;

						.red-box {
							font-size: 30rpx;

						}

						.grey-box {
							font-size: 30rpx;
							font-weight: 500;
						}
					}
				}
			}
		}



		.date-flip {
			margin-top: 50rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			.date-information {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				font-weight: 400;
				color: #2EA7E0;
				margin: 0rpx 54rpx;
			}
		}

		//功能模块 记录数据方法
		.data-record-box {
			padding: 0rpx 18rpx;
			height: 140rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.function-box {
				width: 344rpx;
				height: 80rpx;
				background: #FFFFFF;
				border-radius: 10rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.functional-text {
					margin-left: 14rpx;
					font-size: 28rpx;
					font-weight: 500;
					color: #000000;
				}

			}

		}

		//
		.special-evaluation {

			.evaluation-list {
				width: 718rpx;
				height: 136rpx;
				margin-left: 16rpx;
				padding: 30rpx 38rpx;
				margin-bottom: 30rpx;
				background-size: 100% 100%;

				.big-name {
					font-size: 34rpx;
					font-weight: 500;
				}

				.small-name {
					margin-top: 10rpx;
					font-size: 26rpx;
					font-weight: 400;
				}
			}
		}


	}

	//推荐模块
	.recommended-modules {
		padding: 24rpx 20rpx;
		background: #FFFFFF;
		border-radius: 25rpx;
		margin-bottom: 30rpx;

		.title-module {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left-title {
				display: flex;
				align-items: center;

				.color-block {
					width: 9rpx;
					height: 25rpx;
					background: #2EA7E0;
					border-radius: 5rpx;
				}

				.title-name {
					font-size: 36rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
					margin-left: 12rpx;
				}
			}

			.right-title {
				display: flex;
				align-items: center;

				.right-name {
					font-size: 26rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
				}
			}
		}
	}

	.each-knowledge-point {

		.top-half-of-list {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.list-left {
				width: 450rpx;
				height: 160rpx;
				display: flex;
				justify-content: space-between;
				flex-direction: column;

				.knowledge-content {
					font-size: 30rpx;
					font-weight: 500;
					color: #333333;
					line-height: 42rpx;
				}

				.views {
					font-size: 26rpx;
					font-weight: 400;
					color: #999999;
					margin-left: 10rpx;
				}
			}
		}
	}

	.product-list {
		// padding: 1rpx 42rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;

		.every-item {
			margin-top: 30rpx;
			width: 320rpx;
			box-shadow: 0px 15rpx 26rpx 0px rgba(219, 215, 215, 0.25);
			overflow: hidden;
			border-radius: 16rpx;
			background-color: #fff;

			.content-information {
				padding: 22rpx;

				.trade-name {
					height: 84rpx;
					font-size: 30rpx;
					font-weight: 500;
					color: #333333;
					line-height: 42rpx;
				}

				.sales-price {
					margin-top: 20rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.price {
						font-size: 26rpx;
						font-weight: 500;
						color: #F56767;
					}

					.sales-volume {
						font-size: 24rpx;
						font-weight: 400;
						color: #999999;
					}
				}
			}

		}
	}
</style>
